import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Video } from '@tarojs/components';
import { PLAYBACK } from '../../constants/api';
import { http } from '../../utils/http';
import {GetRequest,vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
interface VideoInfo {
    errcode: number;
    total: number;
    live_replay: VideoItem[];
    errmsg: string;
    room_info: string[];
}
interface VideoItem {
    creat_time: string;
    expire_time: string;
    media_url: string;
}
export default class Playback extends Component {
    state: {
        roomid: number;
        videoInfo: VideoInfo;
    } = {
        roomid: 0,
        videoInfo: {
            errcode: 0,
            total: 0,
            live_replay: [],
            errmsg: '',
            room_info: []
        }
    }
    async componentDidShow() {
      vcmonitor(this)
    }
    async UNSAFE_componentWillMount() {
      if(process.env.TARO_ENV==='h5'){
        await h5Wx.getConfig()
        Taro.showModal({
          title: '提示',
          content: '该功能暂未开放，请使用小程序观看',
          showCancel: false,
          confirmText: '知道了',
          success(res) {
            Taro.navigateBack({
              delta: 1
            })
          }
        })
        return
      }
        const { roomid = 0 } = Taro.getCurrentInstance().router.params
        if(roomid) {
            const videoInfo = await http.post<VideoInfo>(PLAYBACK + '/' + roomid, {})
            if(videoInfo) {
                this.setState({ roomid, videoInfo })
            }
        } else {
            Taro.showModal({
                title: '错误提示',
                content: '无效的直播房间ID, 点击确定返回上一页',
                success: (res) => {
                    if(res.confirm) {
                        Taro.navigateBack({
                            delta: 1
                        })
                    }
                },
                showCancel: false
            })
        }
    }
    render(){
        // http://1258344707.vod2.myqcloud.com/1b87576bvodcq1258344707/812e66595285890799077507633/playlist_eof.m3u8
        const { videoInfo } = this.state
        return (
            <View>
              <GzhAuth />
                {videoInfo.live_replay.length > 0 && videoInfo.live_replay[0] && videoInfo.live_replay[0].media_url && <Video
                    controls
                    src={videoInfo.live_replay[0].media_url}
                    autoplay
                    style="width: 100vw; height: 100vh; display:block;"
                    ></Video>}
            </View>
        )
    }
}
